<template>
    <div class="body-style">
        <img src="../../img/e95ade2750a7fde92369b416c7d3176d.jpg" alt="" />

        <h2>您当前点击的是 : {{ clickName }}</h2>
        <div v-for="item in list" :key="item.id" class="box-flex">
            <son :listdata="item" @getson="changeName"></son>
        </div>
    </div>
</template>
<script>
import son from './son.vue';
export default {
    data() {
        return {
            clickName: null,
            list: [
                {
                    id: 1,
                    name: '哈哈1',
                    imgUrl: 'https://ecmb.bdimg.com/tam-ogel/1071039913_1566361671_300_200.jpg',
                    text: '我是第1个数组中的内容吧',
                    price: 999
                },
                {
                    id: 2,
                    name: '哈哈2',
                    imgUrl: 'https://ecmb.bdimg.com/tam-ogel/1071039913_1566361671_300_200.jpg',
                    text: '我是第2个数组中的内容吧',
                    price: 999
                },
                {
                    id: 3,
                    name: '哈哈3',
                    imgUrl: 'https://ecmb.bdimg.com/tam-ogel/1071039913_1566361671_300_200.jpg',
                    text: '我是第3个数组中的内容吧',
                    price: 999
                },
                {
                    id: 4,
                    name: '哈哈4',
                    imgUrl: 'https://ecmb.bdimg.com/tam-ogel/1071039913_1566361671_300_200.jpg',
                    text: '我是第4数组中的内容吧',
                    price: 999
                },
                {
                    id: 5,
                    name: '哈哈5',
                    imgUrl: 'https://ecmb.bdimg.com/tam-ogel/1071039913_1566361671_300_200.jpg',
                    text: '我是第5个数组中的内容吧',
                    price: 999
                },
                {
                    id: 6,
                    name: '哈哈6',
                    imgUrl: 'https://ecmb.bdimg.com/tam-ogel/1071039913_1566361671_300_200.jpg',
                    text: '我是第6个数组中的内容吧',
                    price: 999
                },
                {
                    id: 7,
                    name: '哈哈7',
                    imgUrl: 'https://ecmb.bdimg.com/tam-ogel/1071039913_1566361671_300_200.jpg',
                    text: '我是第7个数组中的内容吧',
                    price: 999
                },
                {
                    id: 8,
                    name: '哈哈8',
                    imgUrl: 'https://ecmb.bdimg.com/tam-ogel/1071039913_1566361671_300_200.jpg',
                    text: '我是第8个数组中的内容吧',
                    price: 999
                }
            ]
        };
    },

    methods: {
        changeName(val) {
            this.clickName = val;
        }
    },
    components: {
        son
    }
};
</script>
<style lang="scss" scoped>
.body-style {
    width: 800px;
    margin: auto;
}
img {
    width: 100%;
}
h2 {
    text-align: center;
}
.box-flex {
    width: 50%;
    display: inline-block;
}
</style>
